<template>
  <div class="home-container">
    <a-row :gutter="16" class="row-line" v-for="(item, index) in computedList" :key="index">
      <a-col class="gutter-row" :span="6" v-for="(listItem, listIndex) in item" :key="listIndex">
        <div class="gutter-box">
          <router-link to="/templateDetail">
            <CardC :cardInfo="listItem"></CardC>
          </router-link>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import CardC from './components/Card.vue'
import type { ListItemType } from './types/index'
const list: ListItemType[] = [
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
  {
    img: 'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
    title: 'test title 1'
  },
]
const computedList = computed(() => {
  const result = []
    for (let i = 0; i < list.length; i += 4) {
      result.push(list.slice(i, i + 4))
    }
    return result
})
</script>

<style lang="scss" scoped>
.home-container {
  max-width: 1200px;
  margin: auto;
  padding: 30px 0;
}
.row-line:not(:last-child) {
  margin-bottom: 30px;
}
</style>